<template>
  <a-layout>
    <!--      右侧内容-->
    <a-layout-content
        :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }">
      <div class="about">
        <p>
          <a-button type="primary" @click="showModal">新增</a-button>
        </p>
        <a-table :columns="columns" :row-key="item => item.id" :data-source="ebooks" :pagination="pagination"
                 :loading="isLoading" @change="handleTableChange">
          <template #bodyCell="{ column, text , record}">
            <template v-if="column.dataIndex === 'cover'">
              <img :src="text" alt="封面"/>
            </template>
            <template v-else-if="column.dataIndex === 'action'">
              <a-space size="small">
                <a-button type="primary" @click="showModal(record)">
                  编辑
                </a-button>
                <a-popconfirm
                      title="是否确认要删除?"
                      ok-text="Yes"
                      cancel-text="No"
                      @confirm="confirm(record.id)"
                      @cancel="cancel"
                  >
                  <a-button danger>
                    删除
                  </a-button>
                </a-popconfirm>

              </a-space>
            </template>
          </template>
        </a-table>
      </div>
    </a-layout-content>
  </a-layout>

  <!--  模态框-->
  <a-modal v-model:open="open" title="Title" :confirm-loading="confirmLoading" @ok="handleOk">
    <p> {{modalText}} </p>
    <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-item label="封面" name="cover">
        <a-input v-model:value="formState.cover"/>
      </a-form-item>
      <a-form-item label="名称" name="name">
        <a-input v-model:value="formState.name" placeholder="请输入书籍名"/>
      </a-form-item>
      <a-form-item label="分类一" name="category1Id">
        <a-input v-model:value="formState.category1Id" placeholder="请输入分类一"/>
      </a-form-item>
      <a-form-item label="分类二" name="category2Id">
        <a-input v-model:value="formState.category2Id" placeholder="请输入分类二"/>
      </a-form-item>
      <a-form-item label="描述" name="description">
        <a-input v-model:value="formState.description" placeholder="请输入描述"/>
      </a-form-item>
    </a-form>

  </a-modal>
</template>

<script setup lang="ts">
import {defineComponent, onMounted, ref, reactive, toRef} from 'vue';
// 导入axios
import axios from 'axios';

//弹窗
const modalText = ref<string>('Content of the modal');
const open = ref<boolean>(false);
const confirmLoading = ref<boolean>(false);
const showModal = (record: any) => {
  open.value = true;

  //弹窗内容
  // modalText.value = JSON.stringify(record)

  formState.id = record.id;
  formState.cover = record.cover;
  formState.name = record.name;
  formState.category1Id = record.category1Id;
  formState.category2Id = record.category2Id;
  formState.description = record.description;
};
const handleOk = () => {
  modalText.value = 'The modal will be closed after two seconds';
  confirmLoading.value = true;
  axios.post('/ebook/save',formState).then(res=>{
    //请求成功
    if (res.data.code==200){
      //关闭弹窗
      open.value = false;
      confirmLoading.value = false;

      // 刷新页面
      fetchEbooks();
    }
  })
};

//表单
const labelCol = {style: {width: '150px'}};
const wrapperCol = {span: 14};

// 表单类型
interface ebookFormState {
  id: number;
  cover: string;
  name: string;
  category1Id: number;
  category2Id: number;
  description: string;
}

// 表单数据
const formState = reactive<ebookFormState>({
  id: 0,
  cover: '',
  name: '',
  category1Id: 0,
  category2Id: 0,
  description: ''
})

// 删除
import { message } from 'ant-design-vue';
const confirm = (id: number) => {
  console.log(id);
  //发送删除请求
  axios.delete('ebook/delete/'+id).then(res=>{
    //请求成功
    if (res.data.code === 200){
      message.success('删除成功');
      //刷新页面
      fetchEbooks();
    }else{
      message.error('删除失败');
    }
  })
};
const cancel = () => {
  message.error('Click on No');
};

// 定义表格结构
// 表格结构
const columns = [
  {
    title: '封面',
    dataIndex: 'cover',
  },
  {
    title: '名称',
    dataIndex: 'name'
  },
  {
    title: '分类一',
    dataIndex: 'category1Id'
  },
  {
    title: '分类二',
    dataIndex: 'category2Id'
  },
  {
    title: '文档数',
    dataIndex: 'docCount'
  },
  {
    title: '阅读数',
    dataIndex: 'viewCount'
  },
  {
    title: '点赞数',
    dataIndex: 'voteCount'
  },
  {
    title: '操作',
    dataIndex: 'action',
  }
];

// 表格数据
const ebooks = ref([]);

//分页信息
const pagination = ref({
  pageSize: 5,
  total: 0,
  current: 1
})

// 数据加载状态
const isLoading = ref(true)

//封装请求方法
const fetchEbooks = async () => {
  await axios.get('/ebook/list', {
    params: {
      page: pagination.value.current,
      size: pagination.value.pageSize
    }
  }).then(res => {
    //加载完成
    isLoading.value = false;

    pagination.value.total = res.data.data.total;
    ebooks.value = res.data.data.list;
  }).catch(err => {
    console.error('请求失败：' + err);
    isLoading.value = false;
  })
};

onMounted(fetchEbooks);
//  表格分页
const handleTableChange = (pag: any) => {
  // console.log('handleTableChange', pagination)
  // pagination.value.current = pag.current;

  console.log('handleTableChange', pagination)

  //改变分页信息
  pagination.value.current = pag.current;
  pagination.value.pageSize = pag.pageSize;

  // 重新请求数据
  fetchEbooks();
}
</script>

<style scoped>
.editable-row-operations a {
  margin-right: 8px;
}

img {
  width: 50px;
  height: 50px;
}
</style>

